<template>
  <div class="course">
<!--    <van-tabs :active="activeTab" @change="onChangeCourse">-->
<!--      <van-tab title="星期一">-->
<!--        <van-grid>-->
<!--          <van-grid-item icon="photo-o" text="文字" />-->
<!--          <van-grid-item icon="photo-o" text="文字" />-->
<!--          <van-grid-item icon="photo-o" text="文字" />-->
<!--          <van-grid-item icon="photo-o" text="文字" />-->
<!--        </van-grid>-->
<!--      </van-tab>-->
<!--      <van-tab title="星期二"></van-tab>-->
<!--      <van-tab title="星期三"></van-tab>-->
<!--      <van-tab title="星期四"></van-tab>-->
<!--      <van-tab title="星期五"></van-tab>-->
<!--      <van-tab title="星期六"></van-tab>-->
<!--      <van-tab title="星期天"></van-tab>-->
<!--    </van-tabs>-->
    <view class='top'>
      <view v-for="(item,index) in xingQI" class='top-text' :key="index">周{{item}}</view>
    </view>
    <scroll-view scroll-y="true" class="scroll">
      <view   style="height:1200rpx;width:730rpx;display:flex;">
        <view  style='background-color:#d2e6b3;color:#7cba23;'>
          <view v-for="(item,index) in shuPai" class='left'>{{item}}</view>
        </view>
        <view  class="right_all" v-for="(itemShuPai,indexShuPai) in time" :key="indexShuPai">
          <view v-for="(item,index) in itemShuPai.timeServal" :key="index" :class="['right', 'smalltext',stylesCss[indexShuPai][index]]"  @click="activeClick(item,index,indexShuPai)">{{item}}</view>
        </view>
        </view>
        <!--课表-->
        </view>

    </scroll-view>
    <button class='eva_btn' @click="TiJiao">提交</button>
  </div>
</template>

<script>
  export default {

  data () {
    return {
      xingQI: ['一','二','三','四','五','六','日'],
      shuPai: [1,2,3,4,5,6,7,8],
      activeTab: 0,
      active: "a",
      stylesCss: [
        ['','','','','','','',''],
        ['','','','','','','',''],
        ['','','','','','','',''],
        ['','','','','','','',''],
        ['','','','','','','',''],
        ['','','','','','','',''],
        ['','','','','','','','']
      ],
      time: [
        {
          id: 1,
          xingQI: "一",
          timeServal: ["8:00-10:00","10:00-12:00","12:00-14:00","14:00-16:00","16:00-18:00","18:00-20:00","20:00-22:00","22:00-24:00"]
        },
        {
          id: 2,
          xingQI: "二",
          timeServal: ["8:00-10:00","10:00-12:00","12:00-14:00","14:00-16:00","16:00-18:00","18:00-20:00","20:00-22:00","22:00-24:00"]
        },
        {
          id: 3,
          xingQI: "三",
          timeServal: ["8:00-10:00","10:00-12:00","12:00-14:00","14:00-16:00","16:00-18:00","18:00-20:00","20:00-22:00","22:00-24:00"]
        },
        {
          id: 4,
          xingQI: "四",
          timeServal: ["8:00-10:00","10:00-12:00","12:00-14:00","14:00-16:00","16:00-18:00","18:00-20:00","20:00-22:00","22:00-24:00"]
        },
        {
          id: 5,
          xingQI: "五",
          timeServal: ["8:00-10:00","10:00-12:00","12:00-14:00","14:00-16:00","16:00-18:00","18:00-20:00","20:00-22:00","22:00-24:00"]
        },
        {
          id: 6,
          xingQI: "六",
          timeServal: ["8:00-10:00","10:00-12:00","12:00-14:00","14:00-16:00","16:00-18:00","18:00-20:00","20:00-22:00","22:00-24:00"]
        },
        {
          id: 7,
          xingQI: "天",
          timeServal: ["8:00-10:00","10:00-12:00","12:00-14:00","14:00-16:00","16:00-18:00","18:00-20:00","20:00-22:00","22:00-24:00"]
        },

      ],
      time1: ["8:00-10:00","10:00-12:00","12:00-14:00","14:00-16:00","16:00-18:00","18:00-20:00","20:00-22:00","22:00-24:00"]
      }
    },
  onLoad(){


  },
    onUnload(){
//       var pages = getCurrentPages();
//       var currPage = pages[pages.length - 1];   //当前页面
//       var prevPage = pages[pages.length - 2];  //上一个页面
//
// //直接调用上一个页面对象的setData()方法，把数据存到上一个页面中去
//       prevPage.setData({
//
//     });
//       wx.navigateBack({
//         delta: 1
//       })
    },
  methods: {
    TiJiao(){
//       var pages = getCurrentPages();
//       var currPage = pages[pages.length - 1];   //当前页面
//       var prevPage = pages[pages.length - 2];  //上一个页面
//
// //直接调用上一个页面对象的setData()方法，把数据存到上一个页面中去
//       prevPage.setData({
//         courseShow: true
//     });
      wx.setStorageSync('courseShow', true)
      wx.navigateBack({
        delta: 1
      })
    },
    activeClick(item,index,indexShuPai){
      console.log(item)
      console.log(index, indexShuPai)
      if(this.stylesCss[indexShuPai][index]){
        this.stylesCss[indexShuPai][index] = ''
      }else{
        this.stylesCss[indexShuPai][index] = 'active'
      }
      this.$forceUpdate();
      console.log(this.stylesCss[indexShuPai][index])
      // console.log(e.mp.currentTarget.getAttributeNode('id'))
    },
    onChangeCourse(event){
      this.activeTab=event.mp.detail.index
      wx.showLoading({
        title: '加载中',
      })

      setTimeout(function () {
        wx.hideLoading()
      }, 200)
    }
  }
  }



</script>

<style lang="stylus" rel="stylesheet/stylus">
  .top{
    display: flex;
    flex-direction: row;
    margin-left: 35rpx;
    background-color: #d2e6b3;
    color: #7cba23;
  }
  .top-text{
    width: 100rpx;
    height: 35rpx;
    font-size: 9pt;
    justify-content: center;
    display: flex;
    align-items: center;
  }
  .scroll {
    height: 1170rpx;
    z-index: 101;
    position: fixed;
  }
  .left{
    width: 35rpx;
    height: 138rpx;
    font-size: 9pt;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top: 14rpx;
  }
  .right{
    width: 109rpx;
    height: 138rpx;
    font-size: 9pt;
    justify-content: center;
    display: flex;
    align-items: center;
  }
  .smalltext {
    font-size: 8pt;
    /*color: #fff;*/
    padding-left: -6px;
    margin-top 11rpx;

  }
   .active{
     background-color: #7cba23;
   }
  .right_all{
    color:#d2e6b3;
  }
  .eva_btn{
    width: 600rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    color: #fff;
    background: #1296DB;
    position: fixed;
    left: 75rpx;
    bottom: 37rpx;
    z-index: 999;
  }
</style>
